import { Input, ITouchEvent, View } from "@tarojs/components"
import GpFontIcon from "@/components/GpFontIcon"
import clsx from "clsx"

interface Props {
  value?: string
  placeholder?: string
  className?: string
  controlClassName?: string
  onChange?: (value: string) => void
  onConfirm?: (value: string) => void
  onClick?: (event: ITouchEvent) => void
}

export function GpSearchInput({value, placeholder, className, controlClassName, onChange, onClick, onConfirm}: Props) {
  return (
    <View className={clsx("flex flex-row items-center box-border gap-[16px] h-[72px] rounded-[16px] px-[24px] bg-[#F4F6FC]", className)}
      onClick={onClick}
    >
      <GpFontIcon name="icon-sousuo" size={40} color="#ACAEB2" />
      <Input value={value} placeholder={placeholder} className={clsx("border-none outline-none bg-inherit text-[28px]", controlClassName)}
        onInput={({detail: { value }}) => onChange?.(value)}
        onConfirm={({detail: {value}}) => onConfirm?.(value)}
      />
    </View>
  )
}
